<template>
    <popup
      ref="popupRef"
      title="编辑"
      :async="true"
      width="30%"
      :clickModalClose="true"
      @confirm="handleConfirm"
      @close="handleClose"
    >
    </popup>
  </template>
  <script lang="ts" setup>
  import type { FormInstance } from "element-plus";
  import { adminedit, getLists } from "@/api/financial/lists";
  import Popup from "@/components/popup/index.vue";
  onMounted(() => {
    fetchCateList();
  });
  const emit = defineEmits(["success", "close"]);
  const formRef = shallowRef<FormInstance>();
  const popupRef = shallowRef<InstanceType<typeof Popup>>();
  interface FormData {
    id: string;
    title: string;
    create_time: string;
    status: string;
    order_type: string;
    [key: string]: string; // Add an index signature
  }
  const formData: FormData = reactive({
    id: "",
    title: "",
    create_time: "",
    status: "",
    order_type: "",
    remark: "",
  });
  const formRules = reactive({
    title: [{ required: true, message: "请输入名称", trigger: ["change"] }],
  });
  // 分类列表
  const cateList = ref([]);
  const fetchCateList = async () => {
    const data = await listAll({ key: "finance_unit_cate" });
    cateList.value = data;
  };
  // 表单确认
  const handleConfirm = async () => {
    await formRef.value?.validate();
    fetchEdit();
  };
  const fetchEdit = async () => {
    await adminedit(formData);
    popupRef.value?.close();
    emit("success");
  };
  // 表单取消
  const handleClose = () => {
    emit("close");
  };
  // 打开弹窗
  const open = () => {
    popupRef.value?.open();
  };
  // 设置表单回显数据
  const setFormData = (newData: FormData) => {
    Reflect.ownKeys(formData).map(key => {
      if (typeof key == "string") {
        formData[key] = newData[key];
      }
    });
  };
  defineExpose({ open, setFormData });
  </script>
  <style lang="scss" scoped>
  :deep(.el-form) {
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  </style>
  